<template>
  <view class="home">
    <swiper class="my-swipe" autoplay interval="3000" circular indicator-color="white" indicator-dots>
      <swiper-item v-for="(item, index) in imageData" :key="index">
        <image :src="item.src" mode="heightFix" class="swipe-image"></image>
      </swiper-item>
    </swiper>
    <view class="function-group">
      <view class="function-item" v-for="(item, index) in functionData" :key="index" @tap="goRouter(item.url)">
        <text class="function-text">{{ item.text }}</text>
      </view>
    </view>
    <view class="contact-group">
      <view class="contact-item" v-for="(item, index) in contactData" :key="index">
        <text class="contact-text">{{ item.text }}:</text>
        <text class="contact-value">{{ item.value }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const imageData = [
  {
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
  },
  {
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
  },
  {
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
  },
  {
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
  }
];

const contactData = ref([
  {
    text: '公寓地址',
    value: '江苏无锡'
  },
  {
    text: '客服热线',
    value: '0558-23847678'
  },
  {
    text: '营业时间',
    value: '99:00-22:00'
  },
  {
    text: '邮箱',
    value: '123456789@qq.com'
  }
]);

const functionData = ref([
  {
    text: '在线签约',
    url: '/pages/signup/signup'
  },
  {
    text: '缴费',
    url: '/pages/payment/payment'
  },
  {
    text: '租售',
    url: ''
  }
]);

const goRouter = (url: string) => {
  uni.navigateTo({
    url
  });
};

const onClick = (id: number) => {
  console.log(id);
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
}

.my-swipe {
  width: 100%;
  height: 400rpx;
}

.swipe-image {
  width: 100%;
  height: 100%;
}

.function-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20rpx;
}

.function-item {
  width: 45%;
  margin-bottom: 20rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.function-text {
  text-align: center;
}

.contact-group {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.contact-text {
  font-weight: bold;
}

.contact-value {
  color: #666;
}
</style>
